<template>
  <div>
    <div class="search-con">
      <Input clearable placeholder="输入关键字搜索" class="search-input"/>
      <Button class="search-btn" type="primary"><Icon type="md-search"/>&nbsp;搜索</Button>
    </div>
    <Table border :columns="columns" :data="data" size="small"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="30" :current="2" @on-change="changePage"></Page>
      </div>
      <div style="float: left;">
        <Button type="primary">新增数据</Button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'username'
        },
        {
          title: '姓名',
          key: 'name',
          sortable: true
        },
        {
          title: '手机号',
          key: 'mobile'
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.update(params.index)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data: [
        {
          username: 'admin',
          name: '超级管理员',
          mobile: '15711391200',
          email: '1117662@qq.com'
        },
        {
          username: 'wangfengxi',
          name: '王风喜',
          mobile: '15711391200',
          email: '1117662@qq.com'
        }
      ]
    }
  },
  methods: {
    update (index) {
      console.log(index)
    },
    remove (index) {
      console.log('删除', index)
      this.data.splice(index, 1)
    },
    changePage () {
      console.log('跳转分页')
    }
  }
}
</script>

<style lang="less">
.search-con{
  padding: 10px 0;
  .search{
    &-col{
      display: inline-block;
      width: 200px;
    }
    &-input{
      display: inline-block;
      width: 200px;
      margin-left: 2px;
    }
    &-btn{
      margin-left: 4px;
    }
  }
}
</style>
